<template>
    <div>
      <a href="javascript:" class="go_back" @click="$router.back()">
        <i class="iconfont icon-jiantou2"></i>
      </a>
      <vue-waterfall-easy
        :imgsArr="imgsArr"
        style="height: 700px;"
        :maxCols="0"
        @scrollReachBottom="getData"
        ref="waterfall"
        class="shop_container"
      >
        <div class="img-info" slot-scope="props">
          <p class="some-info">第{{props.index+1}}张图片</p>
          <p class="some-info">{{props.value[0].address}}</p>

        </div>

        <div slot="waterfall-over" style="top: 0">主人，已经加载完啦！</div>
      </vue-waterfall-easy>
    </div>
</template>

<script>
  import vueWaterfallEasy from 'vue-waterfall-easy'
  import {mapState} from 'vuex'
  export default {
    name: 'app',
    data() {
      return {
        imgsArr: [],
        name: 0
      }
    },
    components: {
      vueWaterfallEasy
    },
    computed:{
      ...mapState(['shopsImg'])
    },
    methods: {
      getData() {
        this.$store.dispatch('getShopsImg')
        setTimeout(() => {
          if(this.shopsImg[this.name] !== undefined){
            this.imgsArr.push(this.shopsImg[this.name].name)
            this.name++;
          }else{
            this.$refs.waterfall.waterfallOver()
          }

        },2000)
      }
    },
    created() {
      this.getData()
      this.$store.dispatch('getShops')
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import '../../../common/stylus/minxins.styl';
  .shop_container
    margin-bottom 1.875rem
    overflow hidden
    .shop_list
      .shop_li
        bottom-border-1px(#f1f1f1)
        width 100%
        >a
          clearFix()
          display block
          box-sizing border-box
          padding .563rem .3rem
          width 100%
          .shop_left
            float left
            box-sizing border-box
            width 23%
            height 2.813rem
            padding-right .375rem
            .shop_img
              display block
              width 100%
              height 100%
          .shop_right
            float right
            width 77%
            .shop_detail_header
              clearFix()
              width 100%
              .shop_title
                float left
                width 7.5rem
                color #333
                font-size .6rem
                line-height .6rem
                font-weight 700
                &::before
                  content '品牌'
                  display inline-block
                  font-size .412rem
                  line-height .412rem
                  color #333
                  background-color #ffd930
                  padding .075rem .075rem
                  border-radius .075rem
                  margin-right .188rem
              .shop_detail_ul
                float right
                margin-top .122rem
                .supports
                  float left
                  font-size .375rem
                  color #999
                  border .0375rem solid #f1f1f1
                  padding 0 .075rem
                  border-radius 2px
            .shop_rating_order
              clearFix()
              width 100%
              margin-top .637rem
              margin-bottom .3rem
              .shop_rating_order_left
                float left
                color #ff9a0d
                .rating_section
                  float left
                  font-size .375rem
                  color #ff6000
                  margin-left .15rem
                .order_section
                  float left
                  font-size .375rem
                  color #666
                  transform scale(.8)
              .shop_rating_order_right
                float right
                font-size 0
                .delivery_style
                  transform-origin 35px 0
                  transform scale(.7)
                  display inline-block
                  font-size .45rem
                  padding .0375rem
                  border-radius .075rem
                .delivery_left
                  color #fff
                  margin-right -.375rem
                  background-color #02a774
                  border 1px solid #02a774
                .delivery_right
                  color #02a774
                  border .0375rem solid #02a774
            .shop_distance
              clearFix()
              width 100%
              font-size .45rem
              .shop_delivery_msg
                float left
                transform-origin 0
                transform scale(.9)
                color #666
              .segmentation
                color #ccc
  p
    font-size 0.525rem
  .go_back
    position absolute
    top 5px
    left 5px
    width 30px
    height 30px
    >.iconfont
      font-size 20px
      color #999

</style>
